<template>
  <div>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item href="#">修改密码</Breadcrumb-item>
    </Breadcrumb>
    <div>
      <Form ref="formPassword" :model="formPassword" :rules="ruleValidate" :label-width="100">
        <Form-item label="旧密码" prop="oldPassword">
          <Row>
            <Col span="12">
              <Input v-model="formPassword.oldPassword" placeholder="请输入旧密码" type="password" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="新密码" prop="newPassword">
          <Row>
            <Col span="12">
              <Input v-model="formPassword.newPassword" placeholder="请输入新密码" type="password" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="确认密码" prop="newPassword2">
          <Row>
            <Col span="12">
              <Input v-model="formPassword.newPassword2" placeholder="确认新密码" type="password" />
            </Col>
          </Row>
        </Form-item>

        <Form-item>
          <Button type="primary" @click="handleSave" class="margin-right-sm">保存</Button>
          <Button type="ghost" @click="$router.back()">取消</Button>
        </Form-item>
      </Form>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Account from '@/service/account'

  export default {
    name: 'password',
    components: {
    },
    created () {
    },
    data () {
      return {
        formPassword: {
          oldPassword: '',
          newPassword: '',
          newPassword2: ''
        },
        ruleValidate: {
          oldPassword: [
            {
              required: true,
              message: '旧密码不能为空'
            },
            {
              max: 20,
              message: '旧密码不能多于 20 位'
            },
            {
              min: 4,
              message: '旧密码不能少于 4 位'
            }
          ],
          newPassword: [
            {
              required: true,
              message: '新密码不能为空'
            },
            {
              max: 20,
              message: '新密码不能多于 20 位'
            },
            {
              min: 4,
              message: '旧密码不能少于 4 位'
            }
          ],
          newPassword2: [
            {
              required: true,
              message: '确认密码不能为空'
            },
            {
              max: 20,
              message: '确认密码不能多于 20 位'
            },
            {
              min: 4,
              message: '确认密码不能少于 4 位'
            }
          ]
        }
      }
    },
    computed: {
      ...mapState(['users'])
    },
    watch: {
      'users.user': {
        handler (newVal) {
          this.$set(this, 'formPassword', newVal)
        }
      }
    },
    methods: {
      handleSave () {
        this.$refs.formPassword.validate((valid) => {
          if (valid) {
            if (this.formPassword.newPassword === this.formPassword.newPassword2) {
              const action = 'changePassword'
              this.$store.dispatch(action, {
                username: Account.getUsername(),
                old: this.formPassword.oldPassword,
                password: this.formPassword.newPassword
              }).then(() => {
                this.$Message.success('保存成功！')
              })
            } else {
              this.$Message.error('确认密码与新密码不一致！')
            }
          }
        })
      },
      resetFields () {
        this.$refs.formPassword.resetFields()
      }
    }
  }
</script>
